"use client";
import { getCheckUserPhoneExistApi } from "@/api/user";
import ButtonOwn from "@/components/ButtonOwn";
import DomainFooter from "@/components/DomainFooter";
import HeaderBack from "@/components/HeaderBack";
import { useRouter } from "@/i18n";
import { Toast } from "antd-mobile";
import { useTranslations } from "next-intl";
import { FC, useState } from "react";
import "./page.scss";

interface Props {}

const ResetPhone: FC<Props> = () => {
    const t = useTranslations("ResetPhonePage");
    const router: any = useRouter();
    let [userPhone, setUserPhone] = useState("");
    const changeUserPhone = (e: { target: { value: any } }) => {
        const value = e.target.value.replace(/[^0-9]/g, "");
        setUserPhone(value);
    };
    let [msgError, setMsgError] = useState("");
    const blurVerifyPhone = (e: { target: { value: any } }) => {
        const { value } = e.target;
        if (value == "") {
            setMsgError("");
            return;
        }
        if (value) {
            setMsgError(t("enterCorrectphone"));
            return;
        }
        setMsgError("");
    };
    const checkUserPhoneRequest = async () => {
        // if (!phoneRegex(userPhone)) return;
        let { code, msg, data } = await getCheckUserPhoneExistApi({ user_phone: userPhone });
        if (code == 200) {
            if (data) {
                router.push(`/verification?userPhone=${userPhone}`);
                return;
            } else {
                Toast.show(t("notPhone"));
            }
            setMsgError(msg);
        }
    };
    return (
        <div className="resetPhone-box">
            <HeaderBack />
            <div className="main">
                <div className="title">
                    <h2>{t("h2")}</h2>
                    <div>{t("h3")}</div>
                </div>
                <div className="phoneInput">
                    <span className="after">{t("areaCode")}</span>
                    <input
                        type="tel"
                        value={userPhone}
                        onChange={changeUserPhone}
                        onBlur={blurVerifyPhone}
                        placeholder={t("Celular")}
                        maxLength={11}
                    />
                </div>
                {msgError && <div className="tips"> {msgError} </div>}
                <div className="btnContent">
                    <ButtonOwn active callbackFun={checkUserPhoneRequest}>
                        {t("Continuar")}
                    </ButtonOwn>
                </div>
            </div>
            <DomainFooter />
        </div>
    );
};

export default ResetPhone;